@-moz-keyframes ants {
    to {
      background-position: 100%;
    }
  }
  
  @keyframes ants {
    to {
      background-position: 100%;
    }
}

.readingNotes-cssSecret-01{
    .exp{
        margin: 25px 0;
        padding: 25px 0;
        background: #eee;
        border-radius: 4px;
        >div{
            width: 310px;
            height: 140px;
            margin: 0 auto;
            background: #fff;
            text-align: center;
            line-height: 80px;
        }
    }
    div.transparent-border > div {
        border: 20px dotted rgba(0, 0, 255, 0.1);
    }

    div.transparent-border > div.act {
        background-clip: padding-box;
    }

    div.multiple-border-box-shadow {
        padding-top: 25px;
    }

    div.multiple-border-box-shadow > div {
        height: 105px;
        width: 290px;
        background-color: white;
        box-shadow: 0 0 0 5px #655, 0 0 0 10px deeppink, 0 2px 5px 10px rgba(0, 0, 0, 0.6);
    }

    div.multiple-border-outline > div {
        background-color: white;
        border: 5px solid #655;
        outline: 5px solid deeppink;
    }

    div.bg {
        height: 160px;
        background: url("@/assets/readingNotes/cssSecret/01.png") no-repeat bottom right rgb(225, 213, 216);
    }

    div.bg-position {
        background-position: right 20px bottom 10px;
    }

    div.bg-origin {
        padding: 10px 20px;
        background-origin: content-box;
    }

    div.bg-calc {
        background-position: calc(100% - 20px) calc(100% - 10px);
    }

    div.inner-border-radius > div {
        width: 290px;
        background: tan;
        border-radius: 12px;
        box-shadow: 0 0 0 6px #655;
        outline: 9px solid #655;
    }

    div.linear-1 > div {
        background: linear-gradient(#fb3 50%, #58a 50%);
        background-size: 100% 30px;
    }
      
    div.linear-2 > div {
        background: linear-gradient(to right, #fb3 50%, #58a 0);
        background-size: 30px 100%;
    }
      
    div.linear-3 > div {
        background: linear-gradient(45deg,#fb3 25%,#58a 25%,#58a 50%,#fb3 50%,#fb3 75%,#58a 75%);
        background-size: 42.426px 42.426px;
    }

    div.linear-4 > div {
        background: repeating-linear-gradient(45deg,#fb3,#fb3 15px,#58a 15px,#58a 30px);
    }

    div.linear-5 > div {
        background: #58a;
        background-image: repeating-linear-gradient(30deg,rgba(255, 255, 255, 0.1),rgba(255, 255, 255, 0.1) 15px, transparent 15px, transparent 30px);
    }

    div.linear-6 > div {
        background: white;
        background-image: linear-gradient(90deg,rgba(200, 0, 0, 0.5) 50%,transparent 0),linear-gradient(rgba(200, 0, 0, 0.5) 50%, transparent 0);
        background-size: 30px 30px;
    }
      
    div.linear-7 > div {
        background: #58a;
        background-image: linear-gradient(#ccc 1px, transparent 0),linear-gradient(90deg, #ccc 1px, transparent 0);
        background-size: 20px 20px;
    }
    
    div.linear-8 > div {
        background: #58a;
        background-image: linear-gradient(white 2px, transparent 0),linear-gradient(90deg, white 2px, transparent 0), linear-gradient(hsla(0, 0%, 100%, 0.3) 1px, transparent 0), linear-gradient(90deg, hsla(0, 0%, 100%, 0.3) 1px, transparent 0);
        background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
    }
      
    div.linear-9 > div {
        background: #655;
        background-image: radial-gradient(tan 20%, transparent 0);
        background-size: 30px 30px;
    }
      
    div.linear-10 > div {
        background: #655;
        background-image: radial-gradient(tan 20%, transparent 0), radial-gradient(tan 20%, transparent 0);
        background-size: 30px 30px;
        background-position: 0 0, 15px 15px;
    }

    div.linear-11 > div {
        padding: 1em;
        border: 1em solid transparent;
        background: linear-gradient(white, white), repeating-linear-gradient(-45deg,red 0,red 12.5%,transparent 12.5%,transparent 25%,#58a 25%,#58a 37.5%,transparent 37.5%,transparent 50%);
        background-size: 3em 3em;
        background-clip: padding-box, border-box;
    }
    
    div.marching-ants > div {
        padding: 1em;
        border: 1px solid transparent;
        background: linear-gradient(white, white), repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%);
        background-clip: padding-box, border-box;
        background-size: 0.6em 0.6em;
        animation: ants 12s linear infinite;
    }
}